<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1 {
            width: 300px;
            height: 300px;
            /* 颜色多个 
            
            百分百占多少 不均匀过度
        
            */
            /* background: radial-gradient(red  0%,yellowgreen 10%,blue 20%); */
            border: 1px solid rebeccapurple;
            /* border-radius: 50%; */
            background: radial-gradient(red  ,blue );
        }
        .box2 {
            width: 300px;
            height: 100px;
            background: radial-gradient();
            margin-top: 10px;
            border: 1px solid rebeccapurple;
            /* background: radial-gradient( circle ,red ,blue,green); */

            /* 设置形状 circle 圆形*/

            background:-webkit-radial-gradient(60% 40%,farthest-corner,
            blue,green,yellow,black);
            
            /* -webkit-  
                -moz- 火狐浏览器

            */
        }
    </style>

</head>

<body>


    <div class="box1">
    </div>
    <div class="box2"></div>

</body>

</html>